<template>
  <Header/>
  <ElMain style="background-color: #f1f0f0">
    <main style="display: flex;justify-content: center">
      <div class="flex flex-wrap gap-4">
        <el-card style="width: 1300px;height: 200px;margin-bottom: 20px;" shadow="always">
          <div style="display: flex;justify-content: flex-start">
            <el-avatar style="width: 150px;height: 150px;margin-top: 10px"> <span style="font-size: 2em">user</span> </el-avatar>
            <div style="margin-top: 40px;margin-left: 30px;display: flex;flex-direction: column">
              <span style="font-weight: bold;padding-bottom: 10px">昵称：{{userData.nickname}}</span>
              <div style="padding-bottom: 10px">
                <el-icon style="color: #fad52d"><Avatar/></el-icon><span style="font-weight: bold;color: #42b8e3"><el-tag size="default">影视会员</el-tag></span>
              </div>
              <span style="color: #939292;padding-bottom: 10px">phone:{{userData.phone}}</span>
            </div>
            <div style="padding-top: 80px;margin-left: 500px">
              <span style="font-weight: bold;font-size: 1.5em">{{count}}</span> <span style="color: #939292;font-size: 1.5em;padding-right: 15px">收藏</span>
              <span style="font-weight: bold;font-size: 1.5em">2</span> <span style="color: #939292;font-size: 1.5em;padding-right: 15px">关注</span>
              <span style="font-weight: bold;font-size: 1.5em">10</span> <span style="color: #939292;font-size: 1.5em">获赞</span>
            </div>
          </div>

        </el-card>
        <div style="display: flex;justify-items: right">
          <el-card style="width: 300px;height: 790px;margin-right: 20px" shadow="always">
            <span style="text-align: center;font-weight: bold;font-size: 2em">个人中心</span>
            <personal-aside/>
          </el-card>
          <el-card style="width: 980px;height: 790px" shadow="always">
            <router-view></router-view>
          </el-card>
        </div>
      </div>
    </main>
  </ElMain>
  <Footer/>
</template>

<script setup>

import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
import {onMounted, ref} from "vue";
import {getUserList} from "@/api/user.js";
import {Avatar} from "@element-plus/icons-vue";
import PersonalAside from "@/components/personalAside.vue";
import store from "@/store/index.js";
import {ElMessageBox} from "element-plus";
import router from "@/router/index.js";
const currentUid = ref()
const userData = ref({
  uid:'',
  username:'',
  password:'',
  nickname:'',
  phone:'',
  isAdmin: 0
})
const count = ref(0);
onMounted( () => {
  currentUid.value = store.getters.getUser.name
  console.log("currentUid.value111",currentUid.value)
  if ( currentUid.value === '' || currentUid.value === null || currentUid.value === 1){
    ElMessageBox.alert('登录后查看个人中心', '提示', {
      confirmButtonText: '跳转登录',
      }).then(()=>{
      router.push({
        path:'/login'
      })
    })
  }else{
    getList()
  }
})
async function getList() {
  const res = await getUserList({uid:currentUid.value});
  userData.value = res.data.data[0];
  console.log("res.data.data",res.data.data)
}
</script>

<style scoped>

</style>
